import { Avatar as SAvatar, AvatarFallback, AvatarImage } from "@shadcn/avatar";
import React from "react";
import styled from "styled-components";
import { SyncOutlined } from "@ant-design/icons";

type SizeType = "sm" | "mid" | "lg" | undefined;

const sizeAmount = (st: SizeType) => ({ sm: 20, mid: 25, lg: 30 })[st || "mid"];

const StyledAvatar = styled(SAvatar)<{ $size: SizeType }>`
  ${(props) => {
    const size = sizeAmount(props.$size);
    return `
    width: ${size}px; 
    height: ${size}px;
    `;
  }}

  display: inline-block;
  position: relative;

  .pending-tip {
    position: absolute;
    top: 0;
    left: 0;
    font-size: ${(props) => sizeAmount(props.$size)}px;
    color: #004fc5;
  }
`;

interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  src?: string;
  size?: SizeType;
  pending?: boolean;
}
export function Avatar(props: AvatarProps) {
  const { size, src, alt, pending, ...restProps } = props;
  return (
    <StyledAvatar {...restProps} $size={size}>
      <AvatarImage src={src} />
      <AvatarFallback>{alt}</AvatarFallback>
      {pending && <SyncOutlined spin={true} className={"pending-tip"} />}
    </StyledAvatar>
  );
}
